<template>
  <view class="birthday allColumnCenter">
    <header-title ref="headerTitle" isDisplayBack title="添加家庭成员生日" is-fixed background="#f5f5f5"
                  @getPageHeight="getPageHeight"></header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <view class="birthday_date allRowCenter mt-25" @click.stop="openBetterCalendar">
      <text class="birthday_date_text">{{ !!form.dateBirth ? form.dateBirth : '点击设置日期' }}</text>
    </view>
    <view class="birthday_date allRowCenter mt-25" @click.stop="goSelectFamilyMember">
      <text class="birthday_date_text">{{ !!form.selectName ? form.selectName : '点击选择家庭成员' }}</text>
    </view>
    <view class="birthday_tips column">
      <text class="birthday_tips_text mt-9">提示：</text>
      <text class="birthday_tips_text mt-9">1.首页只能为家庭成员添加生日或纪念日</text>
      <text class="birthday_tips_text mt-9">2.非家庭成员如需要添加生日请在我的里面进行添加</text>
    </view>
    <view class="birthday_bottomButton allRowCenter mt-239" @click.stop="submit">
      <text class="birthday_bottomButton_text">完成</text>
    </view>

    <better-calendar class="z-999"
                     ref="betterCalendarRef"
                     :showCalendar="showCalendar"
                     @confirm="selectDate"
                     @cancel="showCalendar = false"
    ></better-calendar>
  </view>
</template>

<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";
import BetterCalendar from "../../components/shiqinComponents/timePick/timePick.vue";
import {createMemberBirthday} from "../../api/shiqinAPI";

export default {
  components: {BetterCalendar, HeaderTitle},
  data() {
    const INIT_DAY_TYPE = "solar";
    const INIT_DAY_TIMESTAMP = this.$dayjs().valueOf();
    const INIT_DAY = this.$dayjs().format("YYYY-MM-DD");
    return {
      // 头部高度
      headerHeight: 0,

      form: {
        dateBirth: '',
        selectId: '',
        selectName: ''
      },

      showCalendar: false,
      date: {
        type: INIT_DAY_TYPE, // 类型
        timestamp: INIT_DAY_TIMESTAMP, // 时间戳
        solarDate: INIT_DAY, // 公历日期 - 文本（2000-1-1）
        lunarDate: "", // 农历日期 - 文本（己卯年冬月廿五(2000-1-1)）
        lunarDateNumber: "", // 农历生日的数字写法（1999-12-25）
      }
    };
  },
  computed: {
    familyId() {
      return this.$store.state.shiqinStore.selectedId
    }
  },
  onLoad() {
    uni.$on('selectMember', info => {
      this.form.selectId = info.id
      this.form.selectName = info.username
    })
  },
  onReady() {
    this.$nextTick(() => {
      this.$refs.headerTitle.getPageHeight()
    })
  },
  methods: {
    getPageHeight(number) {
      this.headerHeight = number
    },
    goSelectFamilyMember() {
      this.$nav.navigateTo('/pages/familyAnniversary/selectFamilyMember')
    },
    openBetterCalendar() {
      this.showCalendar = true;
    },
    async selectDate(e) {
      this.date = await {
        type: e.type,
        timestamp: this.$dayjs(e.solarDate).valueOf(),
        solarDate: e.solarDate,
        lunarDate: e.lunarDate,
        lunarDateNumber: e.lunarDateNumber,
        isLeap: e.isLeap, // 一年里是否有闰月
      };
      this.form.dateBirth = e.solarDate
      this.showCalendar = false;
    },
    submit() {
      if(!this.form.dateBirth){
        uni.showToast({
          title:'请设置日期',
          icon: 'none'
        })
        return
      }
      if(!this.form.selectId){
        uni.showToast({
          title:'请选择家庭成员',
          icon: 'none'
        })
        return
      }
      createMemberBirthday({
        family_id: this.familyId,
        member_id: this.form.selectId,
        time: this.form.dateBirth,
        type:this.date.type == 'solar' ? 2:1
      }).then(res => {
        if(res.status == '200'){
          uni.showToast({
            title: '添加成功',
            icon: 'none'
          })
          this.$store.dispatch('setSelectedFamilyActions')
          setTimeout(() => {
            uni.navigateBack()
          }, 1000)
        }else{
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    }
  },
}
</script>

<style lang="scss">
.birthday {
  width: 750rpx;
  min-height: 100vh;
  background: $secondaryPages;
  overflow: hidden;

  .birthday_date {
    width: 702rpx;
    height: 80rpx;
    background: #FFFFFF;
    border-radius: 40rpx 40rpx 40rpx 40rpx;

    .birthday_date_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #9F9F9F;
    }
  }

  .birthday_tips {
    width: 702rpx;

    .birthday_tips_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #9F9F9F;
    }
  }

  .birthday_bottomButton {
    width: 362rpx;
    height: 80rpx;
    background: #FF4206;
    border-radius: 41rpx 41rpx 41rpx 41rpx;

    .birthday_bottomButton_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }
}
</style>
